<template>
  <!-- 新增 -->
  <el-dialog v-model="dialogVisible" title="新增菜单">
    <el-form :model="form" label-width="120px" label-position="left">
      <el-form-item label="菜单图标" placeholder="请选择菜单图标">
        <iconVue v-model="form.icon"></iconVue>
      </el-form-item>
      <el-form-item label="菜单标题" placeholder="请输入菜单标题">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="路由地址" placeholder="请输入路由地址">
        <el-input v-model="form.path" />
      </el-form-item>
      <!-- <el-form-item label="上级菜单">
        <el-cascader v-model="name" :options="menuList" @change="handleChange" />
      </el-form-item> -->
      <el-form-item label="上级菜单">
        <el-tree-select v-model="form.parentId" node-key="id" :data="menuData" :render-after-expand="false"
          :check-strictly="true" value-key="id">
          <template #value="{ node, data }">
            {{ data.name }}
          </template>
        </el-tree-select>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="显示顺序" placeholder="请输入显示顺序">
            <el-input-number v-model="form.sort" :min="1" :max="10" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="组件名" placeholder="请输入组件名">
            <el-input v-model="form.component_name" />
          </el-form-item> -->
          <el-form-item label="菜单类型">
            <el-select v-model="form.type" placeholder="请选择菜单类型">
              <el-option label="顶级菜单" :value="1" />
              <el-option label="一级菜单" :value="2" />
              <el-option label="二级菜单" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="菜单状态" placeholder="请选择菜单状态">
            <el-select v-model="form.status">
              <el-option label="正常" :value="0" />
              <el-option label="异常" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可见" placeholder="请选择是否可见">
            <el-select v-model="form.visible">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="是否缓存" placeholder="请选择是否缓存">
            <el-select v-model="form.keepAlive">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否总显示" placeholder="请选择是否总显示">
            <el-select v-model="form.alwaysShow">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="AddMenu">新增</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑 -->
  <el-dialog v-model="EditVisible" title="编辑菜单">
    <el-form :model="form" label-width="120px" label-position="left">
      <el-form-item label="菜单图标" placeholder="请选择菜单图标">
        <iconVue v-model="form.icon"></iconVue>
      </el-form-item>
      <el-form-item label="菜单标题" placeholder="请输入菜单标题">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="路由地址" placeholder="请输入路由地址">
        <el-input v-model="form.path" />
      </el-form-item>
      <!-- <el-form-item label="上级菜单">
        <el-cascader v-model="name" :options="menuList" @change="handleChange" />
      </el-form-item> -->
      <el-form-item label="上级菜单">
        <el-tree-select v-model="form.parentId" node-key="id" :data="menuData" :render-after-expand="false"
          :check-strictly="true" value-key="id">
          <template #value="{ node, data }">
            {{ data.name }}
          </template>
        </el-tree-select>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="显示顺序" placeholder="请输入显示顺序">
            <el-input-number v-model="form.sort" :min="1" :max="10" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="组件名" placeholder="请输入组件名">
            <el-input v-model="form.component_name" />
          </el-form-item> -->
          <el-form-item label="菜单类型">
            <el-select v-model="form.type" placeholder="请选择菜单类型">
              <el-option label="顶级菜单" :value="1" />
              <el-option label="一级菜单" :value="2" />
              <el-option label="二级菜单" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="菜单状态" placeholder="请选择菜单状态">
            <el-select v-model="form.status">
              <el-option label="正常" :value="0" />
              <el-option label="异常" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可见" placeholder="请选择是否可见">
            <el-select v-model="form.visible">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="是否缓存" placeholder="请选择是否缓存">
            <el-select v-model="form.keepAlive">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否总显示" placeholder="请选择是否总显示">
            <el-select v-model="form.alwaysShow">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="EditMenu">编辑</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 表格 -->
  <el-button type="primary" size="large" round @click="dialogVisible = true">新增</el-button>
  <el-table :data="menuList" style="width: 100%; margin-bottom: 20px" row-key="id" border>
    <el-table-column prop="name" label="名称" width="200" />
    <el-table-column prop="path" label="路径" />
    <el-table-column prop="icon" label="图标">
      <template #default="scope">
        <el-icon>
          <component :is=scope.icon />
        </el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="permission" label="权限标识" />
    <!-- <el-table-column prop="creator" label="缓存" /> -->
    <el-table-column prop="visible" label="可见" :formatter="NoVisiblele" />
    <el-table-column prop="createTime" label="创建时间" :formatter="forCreateTime" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.row)" />
        <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
      </template>
    </el-table-column>
  </el-table>
</template>
     
<script setup>
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { getmenu, deleteMenu, addMenu,editMenu } from '@/api/menu'
import { onBeforeMount, ref } from 'vue'
import { ElMessage } from "element-plus";
import iconVue from '../../../assets/icon.vue';
import { useUserStore } from '../../../stores/user'
const isUseUserStore = useUserStore()
const menuData = isUseUserStore.menuList
const dialogVisible = ref(false)
const EditVisible = ref(false)
const form = ref({
  id: null,
  name: "",
  parentId: null,
  type: null,
  sort: 1,
  path: "",
  icon: "",
  status: null,
  visible: null,
  keepAlive: null,
  alwaysShow: null
})

//时间戳转换格式
let menuList = ref([]);
const forCreateTime = (row) => {
  const timestamp = row.createTime;
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要加1，并且保证两位数
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return formattedDate;
}
const NoVisiblele = (row) => {
  return row.visible == 0 ? '隐藏' : '显示'
}

const AddMenu = () => {
  dialogVisible.value = false
  addMenu(form.value).then((res) => {
    if(res.code == 200){
      init();
      ElMessage.success("新增成功");
    }else{
      ElMessage.success("新增失败");
    }
  })

}
const EditMenu = () =>{
  EditVisible.value = false
  editMenu(form.value).then((res) =>{
    if(res.code == 200){
      init();
      ElMessage.success("修改成功");
    }else{
      ElMessage.success("修改失败");
    }
  })

}
//查询菜单
onBeforeMount(() => {
  init()
})
const init = () => {
  getmenu().then((res) => {
    menuList.value = res.data;
  })
}
//编辑方法
const handleEdit = (row) => {
    form.value.name = row.name;
    form.value.path = row.path;
    form.value.parentId = row.parent_id;
    form.value.type = row.type;
    form.value.sort = row.sort;
    form.value.icon = row.icon;
    form.value.status = row.status;
    form.value.visible = row.visible;
    form.value.keepAlive = row.keep_alive; 
    form.value.alwaysShow = row.always_show;
    form.value.id = row.id;
    EditVisible.value = true
}
const handleDelete = (row) => {
  deleteMenu(row.id)
    .then((res) => {
      console.log(res);
      init();
      ElMessage.success("删除成功");
    })
    .catch((error) => {
      console.error(error);
      ElMessage.error("删除失败");
    });
};
</script>